import React, { useState } from 'react';
import { Card, Row, Col, Typography, Space, Divider, Alert } from 'antd';
import { 
  FileTextOutlined, 
  VideoCameraOutlined, 
  UploadOutlined,
  EyeOutlined 
} from '@ant-design/icons';
import RichTextEditor from '../../components/RichTextEditor/RichTextEditor';
import FileUpload from '../../components/FileUpload/FileUpload';
import DocumentManager from '../../components/DocumentManager/DocumentManager';
import { FileViewerTrigger } from '../../components/FileViewer/FileViewer';
import './Demo.scss';

const { Title, Paragraph, Text } = Typography;

const Demo = () => {
  const [editorContent, setEditorContent] = useState({
    html: '<h1>欢迎使用作品发布系统</h1><p>这是一个功能完整的演示页面，展示了系统的所有核心功能。</p>',
    json: null
  });
  const [uploadedFiles, setUploadedFiles] = useState([]);

  const handleEditorChange = (content) => {
    setEditorContent(content);
  };

  const handleFileUploaded = (file) => {
    setUploadedFiles(prev => [...prev, file]);
  };

  const handleFileDelete = (file) => {
    setUploadedFiles(prev => prev.filter(item => item.id !== file.id));
    if (file.fileUrl) {
      URL.revokeObjectURL(file.fileUrl);
    }
  };

  // 示例文档数据
  const sampleDocuments = [
    {
      id: 'sample-1',
      name: '系统使用手册.pdf',
      type: 'pdf',
      size: 2048000,
      fileUrl: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
      uploadedAt: new Date().toISOString(),
      messages: ['示例PDF文档']
    },
    {
      id: 'sample-2', 
      name: '项目介绍.docx',
      type: 'word',
      size: 1024000,
      fileUrl: 'https://file-examples.com/storage/fe68c8a7c4c2b9c2e9c8f9a/2017/10/file_example_DOC_10kB.doc',
      uploadedAt: new Date().toISOString(),
      messages: ['示例Word文档']
    }
  ];

  return (
    <div className="demo-container">
      <div className="demo-header">
        <Title level={2}>作品发布系统演示</Title>
        <Paragraph>
          这个演示页面展示了系统的所有核心功能，包括富文本编辑、视频插入、文档上传预览等。
        </Paragraph>
      </div>

      <Row gutter={[24, 24]}>
        {/* 富文本编辑器演示 */}
        <Col span={24}>
          <Card 
            title={
              <Space>
                <FileTextOutlined />
                富文本编辑器
              </Space>
            }
            className="demo-card"
          >
            <Alert
              message="功能特性"
              description="支持文本格式化、图片插入、视频嵌入、链接管理等功能。支持YouTube、Bilibili、腾讯视频、优酷等主流视频平台。"
              type="info"
              showIcon
              style={{ marginBottom: 16 }}
            />
            
            <RichTextEditor
              content={editorContent.html}
              onChange={handleEditorChange}
              placeholder="在这里开始编辑内容，尝试插入图片、视频或链接..."
            />
            
            <Divider>编辑器内容预览</Divider>
            <div 
              className="content-preview"
              dangerouslySetInnerHTML={{ __html: editorContent.html }}
            />
          </Card>
        </Col>

        {/* 视频功能演示 */}
        <Col span={24}>
          <Card
            title={
              <Space>
                <VideoCameraOutlined />
                视频播放功能
              </Space>
            }
            className="demo-card"
          >
            <Alert
              message="支持的视频平台"
              description="YouTube、Bilibili、腾讯视频、优酷、以及直接视频文件链接（MP4、WebM、OGG等）"
              type="success"
              showIcon
              style={{ marginBottom: 16 }}
            />
            
            <Space direction="vertical" style={{ width: '100%' }}>
              <Text strong>示例视频（已嵌入编辑器中）：</Text>
              <div className="video-examples">
                <div className="video-wrapper">
                  <iframe 
                    src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&modestbranding=1" 
                    frameBorder="0" 
                    allowFullScreen
                    width="100%" 
                    height="315"
                    title="YouTube示例视频"
                  />
                </div>
              </div>
            </Space>
          </Card>
        </Col>

        {/* 文档上传和预览演示 */}
        <Col span={24}>
          <Card
            title={
              <Space>
                <UploadOutlined />
                文档上传与预览
              </Space>
            }
            className="demo-card"
          >
            <Alert
              message="支持的文档格式"
              description="Word (.docx, .doc)、PowerPoint (.pptx, .ppt)、PDF (.pdf)、Excel (.xlsx, .xls)、文本文件 (.txt, .csv)"
              type="warning"
              showIcon
              style={{ marginBottom: 16 }}
            />
            
            <Row gutter={[16, 16]}>
              <Col xs={24} lg={12}>
                <FileUpload
                  onFileConverted={handleFileUploaded}
                  maxFiles={5}
                />
              </Col>
              
              <Col xs={24} lg={12}>
                <Card size="small" title="示例文档预览">
                  <Space direction="vertical" style={{ width: '100%' }}>
                    {sampleDocuments.map(doc => (
                      <div key={doc.id} className="sample-doc">
                        <Space>
                          <Text strong>{doc.name}</Text>
                          <FileViewerTrigger
                            fileUrl={doc.fileUrl}
                            fileName={doc.name}
                            buttonProps={{
                              size: "small",
                              icon: <EyeOutlined />
                            }}
                          >
                            预览示例
                          </FileViewerTrigger>
                        </Space>
                      </div>
                    ))}
                  </Space>
                </Card>
              </Col>
            </Row>
          </Card>
        </Col>

        {/* 文档管理演示 */}
        {uploadedFiles.length > 0 && (
          <Col span={24}>
            <Card
              title={
                <Space>
                  <EyeOutlined />
                  文档管理
                </Space>
              }
              className="demo-card"
            >
              <DocumentManager
                documents={uploadedFiles}
                onDelete={handleFileDelete}
              />
            </Card>
          </Col>
        )}
      </Row>

      <div className="demo-footer">
        <Divider />
        <Text type="secondary">
          💡 提示：尝试上传不同格式的文档，体验完整的预览功能。Word文档还可以插入到富文本编辑器中。
        </Text>
      </div>
    </div>
  );
};

export default Demo;